<template>
    <div class="father">
        <h3>父组件</h3>
        <p>父组件中的数据：{{ person }}</p>
        <!-- 
            2. 通过属性绑定将父组件中的数据
            传递给子组件
         -->
        <Son :person="person"></Son>
    </div>
</template>

<script setup>
// 导入 Vue 3 内置函数
import {
    reactive
} from 'vue'
// 导入组件
import Son from './Son.vue'

// 1. 父组件准备要传递给子组件的数据
const person = reactive({
    name: '张三',
    age: 24
})
</script>

<style lang="scss" scoped>
.father {
    width: 300px;
    height: 300px;
    background-color: coral;
}
</style>